<template>
  <div class="Subscribe">
    <van-nav-bar title="预约" />

    <van-tabs>
      <van-tab title="全部">
        <div class="ybox" v-for="v in sublist" :key="v.id">
          <div class="ybox-sub">
            <img height="100%" width="100%" :src="baseurl + v.imgSrc" alt="" />
          </div>
          <div class="ysubtt">
            {{ v.tt }}
          </div>
          <div class="ysubtxt">
            {{ v.txt }}
          </div>
          <div class="ysubtxt">已预约:{{ v.nuw }}</div>
        </div>
      </van-tab>
      <van-tab :title="v.tt" v-for="v in sublist" :key="v.id">
        <div class="ybox">
          <div class="ybox-sub">
            <img height="100%" width="100%" :src="baseurl + v.imgSrc" alt="" />
          </div>
          <div class="ysubtt">
            {{ v.tt }}
          </div>
          <div class="ysubtxt">
            {{ v.txt }}
          </div>
          <div class="ysubtxt">已预约:{{ v.nuw }}</div>
        </div>
      </van-tab>
    </van-tabs>
    <div style="height: 50px"></div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      baseurl: "", //图片基准路径
      sublist: [], //预约列表
    };
  },
  methods: {
    getSub() {
      //预约
      this.$api.GetSubc().then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.sublist = res.data.msg.arr;
          this.baseurl = res.data.baseurl;
        }
      });
    },
  },
  mounted() {
    this.getSub();
  },
};
</script>

<style>
.ybox {
  height: 250px;
  border-bottom: 1px solid gray;
  margin: 25px;
  margin-bottom: 0;
}
.ybox-sub {
  height: 170px;
}
.ysubtt {
  margin-top: 5px;
}
.ysubtxt {
  margin: 5px auto;
  font-size: 15px;
  color: gray;
}
</style>